<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增路径')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-path-add">
        <h4 class="form-header h4">路径信息</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label">航迹名称：</label>
            <div class="col-sm-8">
                <input name="name" class="routeName form-control" type="text">
            </div>
        </div>
        <div class="form-group" style="display: none">
            <label class="col-sm-3 control-label">id：</label>
            <div class="col-sm-8">
                <input name="pathId" class="pathId form-control" type="text">
            </div>
        </div>
        <div class="form-group" style="display: none">
            <label class="col-sm-3 control-label">id：</label>
            <div class="col-sm-8">
                <input name="status" class="status form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">艇编号：</label>
            <div class="col-sm-8">
                <input name="boatCode" class="boatCode form-control" type="text" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">类型：</label>
            <div class="col-sm-8">
                <select class="types form-control" name="types" >
                    <option value="0">航迹</option>
                    <option value="1">任务区</option>
                </select>
            </div>
        </div>
        <h4 class="form-header h4">路径点信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addRow('','')"><i class="fa fa-plus">
                    增加</i></button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus">
                    删除</i></button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "boat/path"
    $("#form-path-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-path-add').serialize());
        }
    }

    $(function () {
        var options = {
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'lng',
                    align: 'center',
                    title: '经度',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='coordinate-lng form-control' type='text' name='pathPointList[%s].lng' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'lat',
                    align: 'center',
                    title: '纬度',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='coordinate-lat form-control' type='text' name='pathPointList[%s].lat' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
        };
        $.table.init(options);
    });

    function addRow(lng, lat) {
        var count = $("#" + table.options.id).bootstrapTable('getData').length;
        var row = {
            index: $.table.serialNumber(count),
            lng: lng,
            lat: lat,
        }
        sub.addRow(row);
    }

    function decorateAddPathPage(data) {

        $('.routeName').val(data.routeName);
        $('.boatCode').val(data.boatCode);
        $('.pathId').val(data.pathId);
        $('.status').val(data.status);
        $('.types').val(data.types);
        data.coordinates.forEach(function (point) {
            // 小数点只保留6位
            addRow(point[0].toFixed(6), point[1].toFixed(6));
        });
    }

    function getPathData() {
        //console.log($('.types').val());
        return {
            'routeName': $('.routeName').val(),
            'boatCode': $('.boatCode').val(),
            'pathId': $('.pathId').val(),
            'status':$('.status').val(),
            'types':$('.types').val(),
            'pathPoints': getPathPoints(),
            'coordinates': getCoordinates()
        }
    }

    function getPathPoints(){
        var pathPoints = [];
        var data = $("#" + table.options.id).bootstrapTable('getData');
        data.forEach(function(item){
            var pathPoint = {};
            pathPoint['lng'] = item.lng;
            pathPoint['lat'] = item.lat;
            pathPoint['isSend'] = false;
            pathPoints.push(pathPoint);
        })
        return pathPoints;
    }

    //获取地理信息坐标
    function getCoordinates() {
        var coordinates = [];
        var data = $("#" + table.options.id).bootstrapTable('getData');
        data.forEach(function(item){
            coordinates.push([parseFloat(item.lng),parseFloat(item.lat)]);
        })
        return coordinates;
    }

</script>
</body>
</html>